<template> 
  <el-card class="form-container" shadow="never">
    <el-form :model="permission" :rules="rules" ref="permissionFrom" label-width="150px">
      <el-form-item label="权限名：" prop="name">
        <el-input v-model="permission.name"></el-input>
      </el-form-item>
      <!-- <el-form-item label="权限值：">
        <el-input v-model="permission.value"></el-input>
      </el-form-item> -->
      <el-form-item label="菜单url：">
        <el-input v-model="permission.uri"></el-input>
      </el-form-item>
      <!-- <el-form-item label="排序：">
        <el-input v-model="permission.sort"></el-input>
      </el-form-item> -->
      <el-form-item label="菜单类型：">
        <el-select v-model="idType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item v-if='isList' label="上级目录：" prop="logo">
          <el-select v-model="pid" placeholder="请选择上级目录">
            <el-option
              v-for="item in optionsPid"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="是否显示：">
        <el-radio-group v-model="permission.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('permissionFrom')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('permissionFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import {createPermission,list, getPermission, updatePermission} from '@/api/sys/permission'
  import SingleUpload from '@/components/Upload/singleUpload'
  const defaultPermission={
    name: '',
    status: 1
  };

  export default {
    name: 'PermissionDetail',
    components:{SingleUpload},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
       var name = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入权限名'));
        } else if (value.length <= 20 && value.length>=2) {
          let reg =  /^[a-zA-Z\u4e00-\u9fa5]+$/
          if (reg.test(value)) {
            callback();
          } else {
            callback(new Error('请输入正确的权限名'));
          }
        } else {
          callback(new Error('权限名长度在 2 到 20 个字符'));
        }
      };

      return {
         options: [{
          value: '0',
          label: '目录'
        }, {
          value: '1',
          label: '菜单'
        }],

        optionsPid: [],
        pid: '',

        idType: '0',

        permission:Object.assign({}, defaultPermission),
        rules: {
          name: [
            {required: true,  trigger: 'blur',validator: name}
          ],

        }
      }
    },

    computed:{
      isList() {
        return this.idType == 1
      }
    },

    created() {
      if (this.isEdit) {
        this.permission = JSON.parse(localStorage.getItem('updatePermission'))
        this.permission.type == 0 ? this.idType = '0' : this.idType = '1'
        this.permission.pid == 0 ?  this.pid = '' : this.pid = this.permission.pid


      }else{
        this.permission = Object.assign({},defaultPermission);
      }
      list({}).then(response => {
        console.log('response',response)
        response.data.forEach((item)=>{
          if ( item.pid == 0 )
          this.optionsPid.push(item)
        })
        console.log('this.optionsPid',this.optionsPid)
          // this.list = treeDataTranslate(response.data, 'id',"pid");
      });
      // this.optionsPid
    },

    watch:{
      pid() {
        console.log(this.pid)
        console.log(this.optionsPid)
      }
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否提交数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.isEdit) {
                if (this.idType != 0 && (this.pid + '').length < 1) {
                  return this.$message({
                    message: '请选择上级目录',
                    type: 'error',
                    duration:1000
                  });
                }
                if (this.idType == 0) {
                  this.permission.pid = 0
                  this.permission.type = 0
                } else {
                  this.permission.pid = this.pid
                  this.permission.type = 1
                }
                updatePermission(this.$route.query.id, this.permission).then(response => {
                  this.$refs[formName].resetFields();
                  this.$store.state.user.routerChange ++
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              } else {
                if (this.idType != 0 && (this.pid + '').length < 1) {
                  return this.$message({
                    message: '请选择菜单类型',
                    type: 'error',
                    duration:1000
                  });
                }
                if (this.idType == 0) {
                  this.permission.pid = 0
                  this.permission.type = 0
                } else {
                  this.permission.pid = this.pid
                  this.permission.type = 1
                }
                createPermission(this.permission).then(response => {
                  this.$refs[formName].resetFields();
                  this.permission = Object.assign({},defaultPermission);
                  this.$store.state.user.routerChange ++
                  this.$message({
                    message: '提交成功',
                    type: 'success',
                    duration:1000
                  });
              this.$router.back();
                });
              }
            });

          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.pid = ''
        this.idType = '0'
        this.$refs[formName].resetFields();
        this.permission = Object.assign({},defaultPermission);
      }
    }
  }
</script>


<style>
  .form-container /deep/ .el-select{
    width: 100%;
  }
</style>
